Welcome to Css!

8.07 圆角边框设置2

1、圆角半径设置成一个值时,另一个值和设置的值一样;

2、当使用%设置半径时,半径的值是元素宽度或高度的百公比;

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css</title>

<style type="text/css">

div{width:200px;height:200px;background:#f2f2f2;line-height:200px;text-align:center;

border-top:2px blue solid;

border-bottom:2px blue solid;

border-left:2px blue solid;

border-right:2px blue solid;

border-bottom-right-radius:50%;

border-bottom-left-radius:50%;

border-top-left-radius:50%;

border-top-right-radius:50%;

}

</style>

</head>

<body>

<div>我要好好学习</div>

</body>

</html>

返回值:

如果设置成一个长方形,则最后会生成一个椭圆